<template>
  <div class="view-box" ref="viewBox">
    <el-tabs ref="tabs" v-model="tabName">
      <el-tab-pane label="视频" name="first" ref="tabPane">
        <div class="video-group-button" ref="groupButton">
          <el-popover
            :visible-arrow="false"
            placement="top-start"
            ref="tagPopOverRef"
            title="全部视频"
            trigger="click"
            width="600">
            <button class="video-tag-button" slot="reference">全部视频 <i class="el-icon-arrow-right"></i>
            </button>
            <div>
              <el-divider style="margin: 0"/>
              <div
                style="display: grid; height: 350px; overflow-y: scroll; grid-template-columns: repeat(6, 1fr); row-gap:20px;">
                <div :key="videoTag.id" v-for="videoTag in videoTags"><span
                  @click="handleVideoTagClick(videoTag)"
                  class="tag">{{ videoTag.name }}</span>
                </div>
              </div>
            </div>
          </el-popover>
        </div>

        <div v-if="isShow">
          <!--          <RecycleScroller
                      class="video-box"
                      :items="videoList"
                      :item-size="180"
                      key-field="id"
                      style="scroll-behavior: smooth"
                      v-infinite-scroll="getVideoList"
                      v-slot="{ item }"
                    >

                    </RecycleScroller>-->
          <div class="grid-videos">
            <div :key="video.id" class="video-cell" v-for="video in videos">
              <!-- 图片封面 -->
              <div
                @click="playTheVideo(video)"
                @mouseenter="previewVideo(video)"
                @mouseleave="exitPreviewVideo(video)"
                class="video-image-cover">
                <div :id="video.data.vid + 'cPlay'" class="cPlay">
                  <el-image :src="redPlayIcon"
                            style="width: calc(100% - 10px);
                                 height: calc(100% - 10px);
                                 padding: 4px 4px 4px 7px;"/>
                </div>

                <el-image :id="video.data.vid"
                          :src="video.data.coverUrl + '?param=250y125'"
                          class="video-cover"
                          fit="fill"
                          v-if="video.data"/>
                <!-- 播放数 -->
                <div class="playCount">
                  <el-image :src="playCountIcon" class="playCountIcon"></el-image>
                  <span v-if="video.data">{{ video.data.praisedCount | unitToThousand }}</span>
                </div>
                <!-- 时长 -->
                <span class="video-duration" v-if="video.data">{{ video.data.durationms | millisecondToMinute }}</span>
              </div>
              <!-- 标题 -->
              <div class="video-title" v-if="video.data">
                {{ video.data.title }}
              </div>
              <!-- 作者 -->
              <div class="video-author" v-if="video.data.creator">
                by {{ video.data.creator.nickname }}
              </div>
            </div>

          </div>
        </div>
        <div style="width: 100%; text-align: center" v-if="hasMore && loading">加载中...</div>
        <div style="width: 100%; text-align: center" v-if="!loading && !hasMore">已经滑到底了~</div>

      </el-tab-pane>
      <el-tab-pane label="MV" name="second">歌单</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
  import { videoApi } from '@/api/video/video'
  import playCountIcon from '@/assets/img/discover/playCount.png'
  import redPlayIcon from '@/assets/img/discover/start_red.png'

  export default {
    name: 'Video',
    data() {
      return {
        redPlayIcon,
        tabName: 'first',
        /** 视频标签列表 */
        videoTags: [],
        /** 视频列表 */
        videos: [],
        offset: 0,
        playCountIcon,
        loading: false,
        hasMore: false,
        isAll: true,
        categoryId: 0,
        count: 0,
        isShow: true,
        // 计时
        timeCount: 0,
        // hover计时器
        hoverInterval: null,
        totalHeight: 0
      }
    },
    created() {
      this.getVideoGroupList()
      this.getVideoList()
    },

    methods: {
      over() {
        console.log('over')
      },
      out() {
        console.log('out')
      },

      /** 播放视频 */
      playTheVideo(video) {
        this.exitPreviewVideo(video)
        this.$router.push(`/video/details/${video.data.vid}`)
      },

      /** 预览视频 */
      previewVideo(video) {
        const el = document.getElementById(video.data.vid)
        if (el) {
          if (video.data.previewUrl) {
            el.src = video.data.previewUrl
          }
          this.hoverInterval = setInterval(() => {
            this.timeCount += 100
            // 没有预览图片或者5s后
            if (!video.data.previewUrl || this.timeCount > video.data.previewDurationms) {
              // 出现播放按钮
              const playIcon = document.getElementById(video.data.vid + 'cPlay')
              if (!playIcon) {
                return
              }
              playIcon.style['transition'] = 'opacity 300ms ease-in-out'
              playIcon.style['opacity'] = .9
              playIcon.style['z-index'] = 100
            }
          }, 100)
        }
      },
      /** 退出预览视频 */
      exitPreviewVideo(video) {
        const el = document.getElementById(video.data.vid)
        if (el) {
          clearInterval(this.hoverInterval)
          this.timeCount = 0
          el.src = video.data.coverUrl + '?param=250y125'
          const playIcon = document.getElementById(video.data.vid + 'cPlay')
          if (!playIcon) {
            return
          }
          playIcon.style['opacity'] = 0
          playIcon.style['transition'] = 'opacity 300ms ease-in-out'
        }
      },

      scroll() {
        console.log('滑动')
      },
      load() {
        console.log('load')
        for (let i = 0; i < 3; i++) {
          this.videos.push({ id: this.count++, value: this.count })
        }
      },
      handleVideoTagClick(videoTag) {
        this.categoryId = videoTag.id
        this.offset = 0
        this.isAll = false
        // 清空
        this.videos.splice(0, this.videos.length)
        this.$refs['tagPopOverRef'].doClose()
        this.$nextTick(() => {
          this.getVideoList()
        })
      },
      /**
       * 获取视频标签列表
       * */
      getVideoGroupList() {
        videoApi().getVideoGroupList().then(res => {
          this.videoTags = res.data
        })
      },
      /**
       * 获得所有视频列表
       * 需要做节流处理
       * */
      getAllVideoList() {
        videoApi().getAllVideoList({
          offset: this.offset++ * 8
        }).then(res => {
          if (res.datas) {
            res.datas.forEach(item => item.id = this.count++)
            this.videos.push(...res.datas)
            this.hasMore = res.hasmore
          }
          this.loading = false
        })
      },
      /** 中心处理器 */
      getVideoList() {
        this.loading = true
        if (this.isAll) {
          this.getAllVideoList()
        } else {
          this.getVideoListByCategoryId()
        }
      },
      /** 获取视频标签/分类下的视频 */
      getVideoListByCategoryId() {
        console.log('getVideoListByCategoryId')
        videoApi().getVideoList({
          offset: this.offset++ * 8,
          id: this.categoryId
        }).then(res => {
          if (res.datas) {
            res.datas.forEach(item => item.id = this.count++)
            this.videos.push(...res.datas)
            this.hasMore = res.hasmore
          }
          this.loading = false
        })
      }
    }
  }
</script>
<style lang="less" scoped>

  .tag:hover {
    color: #ec4141;
    cursor: pointer;
  }

  .view-box {
    height: calc(100vh - 130px);
  }

  /*@media screen and (min-width: 1080px) and (max-width: 100vw) {
    .video-box {
      height: 720px;
      overflow: auto;
      display: grid;
      grid-template-columns: repeat(4, auto);
      column-gap: 10px;
      row-gap: 10px;
      justify-content: center;
      margin: 10px 0;
    }

    .video-group-button {
      grid-column: 1 / span 4;
    }
  }*/

  .video-box {
    height: calc(100vh - 200px);
    margin-top: 15px;
  }

  .video-box::-webkit-scrollbar {
    /*width: 0 !important*/
  }

  @media screen and (min-width: 1260px) {
    .grid-videos {
      display: grid;
      grid-template-columns: repeat(4, auto);
      gap: 10px;
      transition: all 300ms;
    }
  }

  @media screen and (max-width: 1260px) {
    .grid-videos {
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 10px;
      transition: all 300ms;
    }
  }

  .video-cell {
    width: 250px;
    height: 100%;
  }


  .video-cover {
    border-radius: 5px;
    height: 125px;
    width: 100%;
    cursor: pointer;
  }

  .video-image-cover {
    position: relative;
  }

  .playCountIcon {
    width: 14px;
    height: 14px;
    vertical-align: text-top;
    margin-right: 2px;
  }

  .playCount {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 14px;
  }

  .video-duration {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: white;
    font-size: 12px;
  }

  .playCountIcon + span {
    color: white;
  }

  .video-title {
    font-size: 14px;
    color: #000;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .video-author {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 视频标签按钮 */
  .video-tag-button {
    padding-left: 10px;
    display: flex;
    width: 85px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #fff;
  }

  .el-divider--horizontal {
    margin: 12px 0;
  }

  :deep(.el-tabs__item.is-active ) {
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }

  .el-tabs {
    padding-top: 10px;
    padding-left: 30px;
  }

  :deep(.el-tabs__nav-wrap::after ) {
    height: 0;
  }

  :deep(.el-tabs__item ) {
    font-size: 16px;
    color: rgba(0, 0, 0, .8);
  }

  :deep(.el-tabs__item:hover ) {
    color: rgba(0, 0, 0, 1);
  }

  :deep(.el-tabs__active-bar ) {
    background-color: #EC4141;
    height: 3px;
    border-radius: 50px;
  }

  :deep(.el-card__body ) {
    padding-top: 0;
    padding-bottom: 20px;
    padding-right: 20px;
  }

  .cPlay {
    width: 35px;
    height: 35px;
    background-color: #fff;
    border-radius: 50px;
    opacity: 0;
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 300ms ease-in-out;
    cursor: pointer;
  }
</style>

